<template>
    <div>
        <Modal ref="modal" @submit="handleSubmit" @cancel="handleCancle" :title="dialog_title">
            <template #default>
                <form class="space-y-4">
                    <!-- id,名称，描述，状态 -->
                    <div class="flex flex-col" v-show="id>0">
                        <label for="id" class="text-sm font-medium text-gray-700">ID:</label>
                        <input type="text" v-model="id" id="id" readonly class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>
                    <div class="flex flex-col">
                        <label for="title" class="text-sm font-medium text-gray-700">名称:</label>
                        <input type="text" v-model="title" id="title" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>
                    <div class="flex flex-col">
                        <label for="description" class="text-sm font-medium text-gray-700">描述:</label>
                        <textarea v-model="description" id="description" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"></textarea>
                    </div>
                    <div class="flex items-center">
                        <label for="status" class="text-sm font-medium text-gray-700 mr-2">状态:</label>
                        <input type="checkbox" v-model="status" id="status" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                    </div>
                </form>
            </template>
        </Modal>
    </div>
</template>

<script setup lang="ts">
import Modal from './Modal.vue';
import { ref,useTemplateRef,computed } from 'vue';
import { TodosApi } from '../../api';
import {useSubjectStore} from '../../stores/subject.store.js';

const store = useSubjectStore();

let modal = useTemplateRef<InstanceType<typeof Modal>>('modal')
let id = ref(0)
let title = ref('')
let description = ref('')
let status = ref(false)
let dialog_title = computed(() => {
    if (id.value > 0) {
        return '编辑待办事项'
    }
    return '新建待办事项'
})

async function handleSubmit() {
    // 处理提交逻辑
    // console.log('Form submitted');
    try {
        if (id.value > 0) {
            await TodosApi.updateTodo(id.value,title.value,description.value,status.value)
            store.notify('todo updated')
        }else{
            await TodosApi.createTodo(title.value,description.value,status.value)
            store.notify('todo created')
        }
        
        modal.value?.close()
    } catch (error) {
        
    }
}
function  handleCancle() {
    // 处理取消逻辑
    console.log('Form cancelled');
    modal.value?.close()
}
function open(data:{
    id?: number,
    title?: string,
    description?: string,
    status?: boolean
}) {
    id.value = data.id || 0
    title.value = data.title || ''
    description.value = data.description || ''
    status.value = data.status || false
    modal.value?.open()
}
function close() {
    modal.value?.close()
}
defineExpose({
    open,
    close
})
</script>

<style scoped></style>